<!--
 * @Description: 选择填报方式弹窗
 * @Author: chenju
 * @Date: 2022-03-22 16:17:19
 * @LastEditors: chenju
 * @LastEditTime: 2022-10-28 15:17:02
-->
<template>
  <el-form
    v-if="dialogVisible"
    class="product-list-content"
    ref="itemFormRefCode"
    :model="productList"
    @submit.prevent
  >
    <el-form-item
      class="product-input-wrap"
      v-for="(item, index) in productList"
      :key="index"
      :prop="[index, 'code']"
      :rules="[
        {
          validator: checkoutInput,
          trigger: ['submit', 'change', 'blur']
        }
      ]"
    >
      <el-input
        placeholder="请输入适用产品编码，每行允许添加一个"
        v-model="productList[index].code"
        class="product-input"
        @input="handleChangeInput"
      ></el-input>
      <el-button style="padding: 8px" @mousedown="handleDeleteInput(index)">
        <el-icon :size="20"><close /></el-icon>
      </el-button>
    </el-form-item>
    <div style="display: flex; flex-direction: row; justify-content: space-between">
      <div>
        <el-button
          class="model-btn g-mt4"
          @click="handleAddInput"
          size="default"
          v-if="productList.length < 20"
          >+ 添加编码</el-button
        >
      </div>
      <div>
        <el-button class="model-btn g-mt4" @click="cancelProduct" size="default"> 取消 </el-button>
        <el-button class="certain-btn model-btn g-mt4" @click="saveProduct" size="default">
          确定
        </el-button>
      </div>
    </div>
  </el-form>
</template>
<script lang="ts">

export default {
  name: 'ApplicationCode'
};
</script>
<script lang="ts" setup>
import { Close } from '@element-plus/icons-vue';
import { isRepeat } from '@/utils/index';
import { defineProps, withDefaults, defineEmits, computed, ref, watch } from 'vue';
interface ModelFillTypeDialogProps {
  visible: boolean;
  data: any;
  code: string;
}
const props = withDefaults(defineProps<ModelFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'confirm', 'handleProductData']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const productList = ref<any[]>([]);
const productListLast = ref<any[]>([]);

watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      // 记录初始化的数据表
      productList.value = JSON.parse(JSON.stringify(props.data));
      productListLast.value = JSON.parse(JSON.stringify(props.data));
    }
  }
);

watch(
  () => props.code,
  val => {
    if (dialogVisible.value) {
      itemFormRefCode.value.validate();
    }
  }
);
// 提交
async function handleConfirm() {
  //   loading.value = true;
  //   if (!localFillType.value) {
  //     createMessage.error('请先选择填报方式');
  //     return;
  //   }
  //   emit('confirm', localFillType.value);
}

const checkoutInput = (rule: any, value: any, callback: any) => {
  // NOTE 为空的时候不做校验
  if (!value) callback();
  if (value === props.code) {
    return callback(new Error('编码已存在'));
  } else if (isRepeat(value, productList.value) >= 2) {
    return callback(new Error('编码已存在'));
  }
  callback();
};

const handleAddInput = () => {
  productList.value.push({
    code: ''
  });
};

const handleDeleteInput = (index: number) => {
  productList.value.splice(index, 1);
  itemFormRefCode.value.validate();
};
const itemFormRefCode = ref();
const saveProduct = () => {
  itemFormRefCode.value.validate((valid: boolean) => {
    if (valid) {
      //   isClickCertain.value = true; // 点击保存将保存标志设置true，提交时不置空
      // 去除空的input
      productList.value = productList.value.filter(item => {
        return item.code !== '';
      });
      emit('handleProductData', productList.value);
      dialogVisible.value = false;
    } else {
      return;
    }
  });
};

// 每次输入时校验整个表单
function handleChangeInput() {
  itemFormRefCode.value.validate();
}
const cancelProduct = () => {
  // 点击取消时来进行回复初始化的那个列表数据
  // 去除空的input
  productList.value = productList.value.filter(item => {
    return item.code !== '';
  });
  dialogVisible.value = false;
};
</script>
<style lang="scss" scoped>
.product-input-wrap {
  margin-bottom: 8px;
  .product-input {
    width: calc(33vw - 88px) !important;
    margin-right: 16px;
  }
}
// :deep(.product-input-wrap) {
//   margin-bottom: 18px !important;
// }

.product-list {
  display: flex;
  flex-direction: column;
  width: 100%;

  .product-list-content {
    background: #f6f9fa;
    border-radius: 2px;
    border: 1px solid #e4e7ed;
    padding: 12px 16px 12px 16px !important;
  }
  .certain-btn {
    background: #03ac82;
    box-shadow: 0px 2px 2px 0px rgba(3, 172, 130, 0.1);
    border-radius: 2px;
    color: #ffffff;
  }
}
</style>
